<template>
  <view class="wcb-page">
    <view class="wcb-site-header">
      <view class="wcb-site-header-item">
        <view class="wcb-site-header-item-icon blue"></view>
        <view class="wcb-site-header-item-title">{{posData.startSite}}</view>
      </view>
      <view class="wcb-site-header-item">
        <view class="wcb-site-header-item-icon red"></view>
        <view class="wcb-site-header-item-title">{{posData.endSite}}</view>
      </view>
      <view class="wcb-site-header-center-fix">
        <div class="line"></div>
        <div class="change-icon"></div>
      </view>
    </view>

    <time-select-comp @dateChange="dateChange"></time-select-comp>

    <view class="wcb-box-item" v-for="(item,idx) in shiftList" @click="shiftClick">
      <view class="wcb-box-item-header">
        <view class="wcb-box-item-price">
          <text class="price">{{item.price}}</text>元/人
        </view>
        <view class="wcb-box-item-time">
          <text class="time">{{item.startTime}}</text>发车<text class="time-des">丨{{item.needTime}}</text>
        </view>
      </view>
      <view class="wcb-box-item-body">
        <view class="wcb-box-item-site">
          <view class="dot-parent">
           <view class="dot green"></view>
          </view>
          <view class="wcb-title">{{item.startSite}}</view>
        </view>
        <view class="wcb-box-item-site-line"></view>
        <view class="wcb-box-item-site">
          <view class="dot-parent">
            <view class="dot red"></view>
          </view>
          <view class="wcb-title">{{item.endSite}}</view>
        </view>
      </view>
      <view class="wcb-box-item-bottom">
        <view :class="{'wcb-rest':true,'wcb-rest-warn': item.restTicket < 10}">{{item.restTicket > 9? '车票充足':'剩余'+item.restTicket+'座'}}</view>
        <view class="wcb-company">{{item.company}}</view>
      </view>
    </view>

  </view>
</template>

<script>

import TimeSelectComp from "../../uni_modules/timeSelectComp/timeSelectComp.vue";
export default {
  components: {TimeSelectComp},
  data() {
    return {
      posData:{},
      shiftList:[{
        startTime: '15:40',
        price: 35,
        startSite: '祖庙地铁口',
        endSite: '魁奇路地铁站E出口',
        needTime: '预计行驶2小时50分',
        restTicket: 9,
        company: '珠海星儿承运'
      },
      {
        startTime: '17:40',
        price: 35,
        startSite: '祖庙地铁口',
        endSite: '魁奇路地铁站E出口',
        needTime: '预计行驶2小时50分',
        restTicket: 19,
        company: 'xxxxxxxx承运'
      }]
    };
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    if(JSON.stringify(eventChannel) !== '{}'){
      eventChannel.on('fromHomeEvent', function(data) {
        this.posData = data;
      })
    }
  },
  methods:{
    dateChange(data){
      console.log('dateChange',data)
    },
    shiftClick(){
      uni.navigateTo({
        url: '/pages/orderSelectSite/orderSelectSite'
      })
    }
  }
}
</script>

<style lang="scss">
  .wcb-box-item{
    background: #FFFFFF;
    border-radius: 10rpx;
    margin: 20rpx;
    padding: 20rpx;
    .wcb-box-item-header{
      position: relative;
      display: flex;
      .wcb-box-item-price{
        position: absolute;
        right: 20rpx;
        .price{
          font-size: 40rpx;
          font-weight: bolder;
          color: #ea6969;
          padding-right: 6rpx;
        }
      }
      .wcb-box-item-time{
        font-size: 22rpx;
        .time{
          font-size: 40rpx;
          font-weight: bolder;
          padding-right: 4rpx;
        }
        .time-des{
          margin-left: 2rpx;
          padding-left: 12rpx;
          color: #777777;
        }
      }
    }
    .wcb-box-item-body{
      margin-top: 14rpx;
      margin-bottom: 14rpx;
      .wcb-box-item-site{
        display: flex;
        line-height: 50rpx;
        height: 50rpx;
        font-size: 26rpx;
        .dot-parent{
          display: flex;
          align-content: center;
          flex-wrap: wrap;
          padding-right: 20rpx;
          .dot{
            width: 12rpx;
            height: 12rpx;
            background: #777777;
            border-radius: 12rpx;
          }
          .green{
            background: #007aff;
          }
          .red{
            background: #ea6969;
          }
        }

      }
    }
    .wcb-box-item-bottom{
      padding-top: 10rpx;
      border-top: 1px solid #f2f2f2;
      display: flex;
      font-size: 24rpx;
      .wcb-rest{
        background: #007aff;
        color: white;
        font-size: 20rpx;
        padding: 2rpx 10rpx;
        border-radius: 10rpx;
      }
      .wcb-rest-warn{
        background: #ea6969;
      }
      .wcb-company{
        position: absolute;
        right: 36rpx;
        color: #777777;
      }
    }
  }
</style>
